// 先新建一个user的组件，作为Home的子组件，在home中添加路由占位符

// 建立页面布局：面包屑导航条（添加to属性指向Home路径）、卡片部分

// 在卡片内部定义搜索与添加、用户列表、分页区域

// 对话框部分不属于页面主体结构内容，在卡片下方定义即可

// 搜索与添加部分理由col和row完成空间分配，类似与flex
// 在data中增加请求数据的对象，里面有一个属性是query,这个属性与搜索框进行绑定

// 在用户列表中添加索引列，添加最上面横向的分类名称
// 定义created阶段调用获取用户列表的方法
// 在method中定义获取方法
// 向后台发送请求，将返回的列表存储在data数据中，并保存总数
// 为用户列表区域绑定列表数据

// 实现搜索功能
// 为小放大镜添加点击事件，点击时调用获取用户列表方法

// 实现添加功能
// 建立一个会话框，正常状态下不可见
// 为添加用户按钮添加点击事件，点击时将会话框变为可见
// 在会话框中添加带有验证的表单,在data中建立存放信息的属性,并与各个表单进行双向绑定
// 为表单添加ref,rules,数据绑定的属性
// 在data中添加验证规则,并且新建验证规则验证邮箱和电话
// 为表单下方的按钮添加取消事件,直接更改显示状态就行
// 为表单下方的按钮添加确定事件,首先先进行预验证valid状态是否为true
// 为true的话发送请求,请求成功的话把表单调为不可视,并重新获取用户列表

// 实现状态更改操作
// 理由scope.row可以获得本列信息
// 为switch添加change事件,事件绑定一个方法
// 该方法向后端发送请求,将当前scope.row中的状态信息修改更新到后台
// 如果失败了需要将switch的状态位取反

// 实现修改信息操作
// 建立一个会话框，正常状态下不可见,为会话框添加几个输入框
// 为按钮添加点击事件,事件处理函数通过scop.row.id获得本列的id
// 在事件处理函数中将会话框可见
// 向后端发送请求获取数据,将数据存储在editForm
// editForm中的数据双向绑定在会话框的输入框中,第一个禁用
// 添加对话框关闭的回退功能
// 输入框添加rules规则
// 为确定按钮添加事件处理函数
// 先进行预验证
// 然后发送请求
// 请求成功时，关闭对话框，获取用户列表

// 实现移除操作
// 为移除按钮绑定移除函数,移除函数接受一个id值
// 先包装为一个promise对象
// 这个对象是confirm表示用户点击了确认删除,否则的话是点击了取消
// 确认删除之后向后端发送请求,删除id数据,并获取新的列表